<template>
    <view class="mine">
      <view class="custom-nav">
        <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
        <view class="nav-content">
          <!-- <view class="nav-left">
            <image src="/static/back-icon.png" @click="goBack" />
          </view>
          <view class="nav-title">我的 {{ statusBarHeight }}</view>
          <view class="nav-right"></view> -->
          <uni-nav-bar left-icon="left" title="我的"  backgroundColor="#1778fd" color="#fff" :border="false"/>
        </view>
      </view>
      <view class="header">
          1313
      </view>
      <!-- 其他页面内容 -->
    </view>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  
  const statusBarHeight = ref(0);
  
  onMounted(() => {
    // 获取状态栏高度
    uni.getSystemInfo({
      success: (res) => {
        statusBarHeight.value = res.statusBarHeight;
      }
    });
  });
  
  const goBack = () => {
    uni.navigateBack();
  };
  </script>
  
  <style lang="scss" scoped>
  .mine {
    .custom-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #1778fd;
      z-index: 999;
  
      .nav-content {
        display: flex;
        align-items: center;
        height: 44px;
        padding: 0 15px;
  
        .nav-left {
          width: 24px;
          height: 24px;
        }
  
        .nav-title {
          flex: 1;
          text-align: center;
          color: #fff;
          font-size: 18px;
        }
  
        .nav-right {
          width: 24px;
          height: 24px;
        }
      }
    }
    .header{
      height: calc(628rpx - 44px);
      background-color: #1778fd;
      border-radius: 0px 0px 40rpx 40rpx;
    }
  }
  </style>
  